<template>
	<view class="user-settled">
		<view class="=avatar">
			<u-avatar :src="IMG_URL+avatar" size="180" class="avatar"></u-avatar>
			<view style="font-size: 26rpx;color: #d8d9d9">入驻互娱师需审核，请上传本人真实照片</view>
		</view>

		<view class="user-msg">
			<view class="img">
				<view class="title1">照片墙
					<span
						style="display: inline-block;color: #dddede;margin-left: 10rpx">{{ `${fileList.length == 0?imgLength:fileList.length} / 6` }}</span>
					<span v-if="fileList.length != 0" style="display: inline-block;color: #1281c6;margin-left: auto"
						@click="toGamerImg">去编辑</span>
				</view>
				<view style="font-size: 22rpx;letter-spacing: 2rpx;margin-bottom: 20rpx">建议上传清晰的图片，便于全方位展示形象</view>
				<view class="img-item">
					<u-upload v-if="isShow" :show-progress="false" max-count="6" ref="uUpload"
						@on-choose-complete="onChooseComplete" @on-remove="removeImg" :auto-upload="false"
						style="margin: 0rpx">
					</u-upload>
					<!--          <u-empty v-if="fileList.length == 0" style="margin: 10rpx auto" text="暂无图片，快去上传吧" mode="favor"></u-empty>-->
					<view v-else style="display: flex;flex-wrap: wrap">
						<u-image width="200rpx" border-radius="10rpx" height="200rpx"
							style="margin-right: 20rpx;margin-top: 20rpx;border-radius: 20rpx" v-for="item in fileList"
							:key="index" :src="IMG_URL+item.link"></u-image>
					</view>
				</view>
			</view>
			<view style="font-size: 28rpx;margin-bottom: 20rpx;margin-top: 40rpx">
				互娱师信息
			</view>
			<view class="msg">
				<!-- <view class="item">
					<view class="i1">姓名</view>
					<u-input v-model="gamerInfo.real_name" :clearable="false" input-align="right" type="text"
						placeholder="请输入姓名 >" />
				</view>
				<view class="item">
					<view class="i1">身份证号码</view>
					<u-input v-model="gamerInfo.identity_card" :clearable="false" input-align="right" type="text"
						placeholder="请输入身份证号码 >" />
				</view> -->
				<view class="item">
					<view class="i1">工作地址</view>
					<u-input @click="addShow = true" v-model="gamerInfo.address" :clearable="false" input-align="right"
						type="picker" placeholder="请选择地址 >" />
				</view>
				<view class="item">
					<view class="i1">工作薪资</view>
					<view class="i2">
						<u-input v-model="gamerInfo.price" :clearable="false" maxlength="6" input-align="right"
							type="number" placeholder="请输入(子曰币/小时)>" />
					</view>
				</view>
				<view class="item" v-if="flag == 3">
					<view class="i1">互娱师标签</view>
					<view class="i2">
						<u-input @click="getGammerTit" v-model="gamerInfo.title" :clearable="false" :disabled="true"
							maxlength="6" input-align="right" type="number" placeholder="请选择你的个人标签>" />
					</view>
				</view>
				<view class="item">
					<view class="i1">工作开始时间</view>
					<u-input @click="work_time_beginShow = true" :disabled="true" v-model="gamerInfo.work_time_begin"
						:clearable="false" input-align="right" type="picker" placeholder="请选择开始时间 >" />
				</view>
				<view class="item">
					<view class="i1">工作结束时间</view>
					<u-input @click="work_time_endShow = true" :disabled="true" v-model="gamerInfo.work_time_end"
						:clearable="false" input-align="right" type="picker" placeholder="请选择结束时间 >" />
				</view>
			</view>

			<view v-if="isShow">
				<u-button :custom-style="customStyle" :loading="isLoading" @click="submit" shape="circle">上传申请
				</u-button>
			</view>
			<view v-else>
				<u-button :custom-style="customStyle" @click="edit" shape="circle">修改互娱师信息</u-button>
			</view>
		</view>

		<!--  地区  -->
		<u-picker mode="region" @cancel="addCancel" @confirm="addConfirm" v-model="addShow"
			:area-code='["44", "4404", "440404"]'></u-picker>
		<!--  开始时间  -->
		<u-picker mode="time" @cancel="work_time_beginCancel" @confirm="work_time_beginConfirm"
			v-model="work_time_beginShow" :params="params"></u-picker>
		<!--  结束时间  -->
		<u-picker mode="time" @cancel="endTimeCancel" @confirm="endTimeConfirm" v-model="endTimeShow" :params="params">
		</u-picker>
		<u-picker mode="time" @cancel="work_time_endCancel" @confirm="work_time_endConfirm" v-model="work_time_endShow"
			:params="params"></u-picker>

		<!-- 标签选择 -->
		<u-popup v-model="show" mode="bottom" :closeable="true">
			<view class="popMargin">
				<!-- 内容多选 -->
				<view style="min-height: 30vh;">
					<u-checkbox-group @change="checkboxGroupChange">
						<u-checkbox v-model="item.is_disabled" @change="checkboxChange"
							v-for="(item, index) in gammerLabel" :key="index" :name="item.id">{{item.title}}
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<!-- 按钮 -->
				<view style="margin-top: 20rpx;">
					<u-button type="success" @click="update()">确认</u-button>
				</view>
				<view style="margin-top: 20rpx;">
					<u-button @click="show=false">取消</u-button>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />

	</view>
</template>

<script>
	import {
		addGamer,
		getGamerByUserId,
		editGamer,
		getGammerLable,
		updateGammerLabel
	} from "../../../api/gamer";
	import {
		pathToBase64
	} from 'image-tools'
	import {
		IMG_URL
	} from "../../../config/URL";

	export default {
		name: "index",
		onLoad() {
			this.page()
		},

		data() {
			return {
				isLoading: false,
				imgLength: 0,
				flag: '',
				IMG_URL,
				avatar: '',
				// 标签数组
				check: false,
				show: false,
				addShow: false,
				isShow: true,
				//选择器相关
				work_time_beginShow: false,
				work_time_endShow: false,
				work_date_beginShow: false,
				work_date_endShow: false,
				gammerLabel: {},
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				},
				fileList: [],
				List: [],
				gamerInfo: {
					address: '',
					work_time_begin: '',
					work_time_end: '',
					price: '',
					links: [],
					// identity_card: '',
					// real_name: '',
					title: [],
				},

				customStyle: {
					marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#fff',
					backgroundColor: '#2bdb70'
				},
			}
		},
		methods: {
			// 首次渲染
			page(){
				this.avatar = uni.getStorageSync('userInfo').avatar
				this.flag = uni.getStorageSync('userInfo').flag
				if (uni.getStorageSync('gamerInfo')) {
					for (const key in this.gamerInfo) {
						this.gamerInfo[key] = uni.getStorageSync('gamerInfo')[key]
					}
				
					let h = parseInt(uni.getStorageSync('gamerInfo').work_time_begin / 60) < 10 ? "0" + parseInt(uni
						.getStorageSync('gamerInfo').work_time_begin / 60) : parseInt(uni.getStorageSync('gamerInfo')
						.work_time_begin / 60)
					let m = uni.getStorageSync('gamerInfo').work_time_begin % 60 < 10 ? "0" + uni.getStorageSync('gamerInfo')
						.work_time_begin % 60 : uni.getStorageSync('gamerInfo').work_time_begin % 60
					this.gamerInfo.work_time_begin = h + ":" + m
				
					let h1 = parseInt(uni.getStorageSync('gamerInfo').work_time_end / 60) < 10 ? "0" + parseInt(uni
						.getStorageSync('gamerInfo').work_time_end / 60) : parseInt(uni.getStorageSync('gamerInfo')
						.work_time_end / 60)
					let m1 = uni.getStorageSync('gamerInfo').work_time_end % 60 < 10 ? "0" + uni.getStorageSync('gamerInfo')
						.work_time_end % 60 : uni.getStorageSync('gamerInfo').work_time_end % 60
					this.gamerInfo.work_time_end = h1 + ":" + m1
				
					// this.gamerInfo.work_time_begin = uni.getStorageSync('gamerInfo').work_time_begin_string
					// this.gamerInfo.work_time_end = uni.getStorageSync('gamerInfo').work_time_end_string
					this.fileList = uni.getStorageSync('gamerInfo').links
					this.isShow = false
				}
			},
			async update() {
				const res = await updateGammerLabel(this.List)
				if (res.data.code === 200) {
					this.$refs.uToast.show({
						title: res.data.data,
						type: 'success',
					})
					this.page()
					// uni.redirectTo({ url: '/subPages/subUser/UserSettled/index' })
				} else {
					this.$refs.uToast.show({
						title: res.data.msg,
						type: 'error',
					})
				}
				this.show = false
			},
			// 复选框
			checkboxGroupChange(e) {
				this.List = e
			},
			checkboxChange(e) {},
			// 弹窗显示标签
			async getGammerTit() {
				this.show = true
				const res = await getGammerLable()
				this.gammerLabel = res.data.data.records
			},

			//上传图片回调
			onChooseComplete(lists, name) {
				let links = []
				lists.map(e => {
					pathToBase64(e.url).then(data => {
						links.push(data)
					})
				})
				this.imgLength = lists.length
				this.gamerInfo.links = links
			},
			//删除图片回调
			removeImg(index, lists) {
				this.imgLength = lists.length
			},

			//地址回调
			addConfirm(val) {
				this.gamerInfo.address = ''
				for (const key in val) {
					this.gamerInfo.address += ((val[key].label) + ' ')
				}
			},
			addCancel(val) {},


			//开始时间回调
			work_time_beginConfirm(val) {
				this.gamerInfo.work_time_begin = val.hour + ':' + val.minute
			},
			work_time_beginCancel(val) {

			},

			//结束时间回调
			work_time_endConfirm(val) {
				this.gamerInfo.work_time_end = val.hour + ':' + val.minute
			},
			work_time_endCancel(val) {

			},

			toGamerImg() {
				uni.navigateTo({
					url: '/subPages/subUser/UserSettled/gamerImg/index'
				})
			},

			//互娱师入驻申请
			async submit() {
				this.isLoading = true
				for (const e in this.gamerInfo) {
					if (!this.gamerInfo[e]) {
						this.$refs.uToast.show({
							title: '请完善数据',
							type: 'error',
						})
						this.isLoading = false
						return false
					}
				}

				const res = await addGamer({
					...this.gamerInfo
				});

				if (res.data.code != 500) {
					const res = await getGamerByUserId({
						id: uni.getStorageSync('userInfo').id
					})
					if (res.data.data != null) {
						uni.setStorageSync('gamerInfo', res.data.data);
					}
					uni.showToast({
						title: '申请成功',
						duration: 3000
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1000)
				} else {
					uni.showToast({
						title: res.data.msg,
						duration: 3000,
						icon: 'none'
					});
					this.isLoading = false
				}
			},
			//互娱师信息修改
			async edit() {
				uni.showLoading({
					title: '修改中'
				});

				const res = await editGamer({
					address: this.gamerInfo.address,
					work_time_begin: this.gamerInfo.work_time_begin,
					work_time_end: this.gamerInfo.work_time_end,
					price: this.gamerInfo.price,
				})
				if (res.data.code == 200) {
					const gamer = await getGamerByUserId({
						id: uni.getStorageSync('userInfo').id
					})
					uni.setStorageSync('gamerInfo', gamer.data.data);
					uni.hideLoading();
					uni.showToast({
						title: '修改成功',
						duration: 2000
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.popMargin {
		margin: 120rpx 30rpx 20rpx 30rpx;
	}

	.user-settled {
		min-height: 100vh;
		background-color: #f7f7f8;
		display: flex;
		flex-direction: column;

		.u-list-item {
			margin: 0rpx !important;
		}

		.avatar {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 40rpx;
		}

		.user-msg {
			flex: 1;
			background-color: #FFFFFF;
			border-top-left-radius: 25rpx;
			border-top-right-radius: 25rpx;
			padding: 40rpx 30rpx;

			.img {
				.title1 {
					font-size: 28rpx;
					margin-bottom: 20rpx;
					display: flex;
				}

				.img-item {
					margin-top: 20rpx;
					display: flex;
				}
			}

			.msg {
				color: black;
				display: flex;
				flex-direction: column;
				border-radius: 20rpx;
				background-color: #f7f7f8;

				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx;
					font-size: 26rpx;

					.i1 {
						white-space: nowrap;
					}

					.i2 {
						color: #adadad;
					}
				}
			}
		}
	}
</style>